<html>
  <head>
    <title>Donut</title>
    <script type="text/javascript" src="../../protovis.js"></script>
  </head>
  <body>
    <script type="text/javascript+protovis">

var data = pv.range(10).map(Math.random).sort(pv.reverseOrder),
    w = 400,
    h = 400,
    i = -1,
    r = w / 2,
    t = 30,
    a = pv.Scale.linear(0, pv.sum(data)).range(0, 2 * Math.PI);

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .events("all")
    .event("mousemove", pv.Behavior.point(Infinity));

var wedge = vis.add(pv.Wedge)
    .data(data)
    .innerRadius(r - t)
    .outerRadius(r)
    .angle(a)
    .title(function(d) d);

wedge.anchor().add(pv.Mark)
    .event("point", function() (i = this.index, label))
    .event("unpoint", function() (i = -1, label));

var label = wedge.anchor("outer").add(pv.Label)
    .visible(function() this.index == i)
    .textMargin(t + 5)
    .text(function(d) d.toFixed(2));

vis.render();

    </script>
  </body>
</html>
